/**
 * 分开的省市区级联
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {Form, Select} from 'antd';
import config from '../../config';
import commonService from '../../services/commonService';
const FormItem = Form.Item;

//调用组件时需传值
//label: '',
//provinceParamName: '',
//cityParamName: '',
//areaParamName: '',

class AreaSelect extends Component {
  state = {
    provinceId: '',
    cityId: '',
    provinceOptions: [],
    cityOptions: [],
    areaOptions: [],
  };

  componentDidMount() {
    this.getRegions('provinceOptions');
  };

  //
  setEmptyState = (value) => {
    this.setState({})
  };

  //获取省市区下拉选
  getRegions = (nextOptions, parentId) => {
    const {provinceParamName, cityParamName, areaParamName} = this.props.item;
    if (nextOptions === 'cityOptions') {
      this.props.setFieldsValue({[cityParamName]: '', [areaParamName]: ''})
    }
    else if (nextOptions === 'areaOptions')
      this.props.setFieldsValue({[areaParamName]: ''})
    commonService.getRegions({parentId}).then(data => {
      if (data.rc === 0) {
        this.setState({
          [nextOptions]: data.ret,
        })
      }
      else if (data.rc === 1) {
      }
    }).catch(err => {
    })
  };

  render() {
    let t = this;
    const {item, getFieldDecorator} = t.props;
    const {provinceOptions, cityOptions, areaOptions} = t.state;

    return (
      <div style={{display: 'inline-block'}}>
        <FormItem label={item.label} className={item.className}>
          {
            getFieldDecorator(item.provinceParamName, {
              initialValue: null,
            })(
              <Select
                size={config.size}
                showSearch
                style={{width: '100px'}}
                optionFilterProp="children"
                onChange={(value) => t.getRegions('cityOptions', value)}
               
              >
                {
                  provinceOptions.map((option, index) => {
                    return (
                      <Select.Option key={index}
                                     value={option.key}
                      >
                        {option.label}
                      </Select.Option>

                    )
                  })
                }
              </Select>
            )
          }
        </FormItem>
        <FormItem className={item.className}>
          {
            getFieldDecorator(item.cityParamName, {
              initialValue: null,
            })(
              <Select
                size={config.size}
                showSearch
                style={{width: '100px', marginLeft: -20}}
                optionFilterProp="children"
                onChange={(value) => t.getRegions('areaOptions', value)}
              >
                {
                  cityOptions.map((option, index) => {
                    return (
                      <Select.Option key={index}
                                     value={option.key}
                      >
                        {option.label}
                      </Select.Option>

                    )
                  })
                }
              </Select>
            )
          }
        </FormItem>
        <FormItem className={item.className}>
          {
            getFieldDecorator(item.areaParamName, {
              initialValue: null,
            })(
              <Select
                size={config.size}
                showSearch
                style={{width: '100px', marginLeft: -20}}
                optionFilterProp="children"
                onChange={t.setEmptyState}
              >
                {
                  areaOptions.map((option, index) => {
                    return (
                      <Select.Option key={index}
                                     value={option.key}
                      >
                        {option.label}
                      </Select.Option>

                    )
                  })
                }
              </Select>
            )
          }
        </FormItem>
      </div>
    )
  }
}
function mapStateToProps(state) {
  return {};
}
export default connect(mapStateToProps)(AreaSelect);
